<template>
    <el-row>
        <el-col class="padd20">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>实践任务</el-breadcrumb-item>
                <el-breadcrumb-item>敬老院打扫志愿服务</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col :span="20" style="min-width: 1100px;">
            <div class="list box box-tb box-pack-start padd20 mb20" v-for="(item,i) in stujlList" :key="i">
                <div class="box box-pack-start">
                    <div class="left box box-tb">
                        <div class="info box">
                            <el-avatar size="large" :src="item.icon" class="avatar">
                            </el-avatar>
                            <div class="box box-tb box-pack-start box-align-start ml20">
                                <div class="">
                                    <span class="name">{{item.userName}}</span>
                                </div>
                                <span class="time">{{item.createTime}}</span>
                            </div>
                        </div>
                        <div class="content mt20">
                            <div class="text tl">{{item.cont}}</div>
                            <div class="images box box-pack-start mt10">
                                <div class="posr mr10 mb10" v-for="(f,index) in item.fileList" :key="index">
                                    <el-image :src="f.url" class="img cp" v-if="f.fileSuffix != 'mp4'"
                                        :preview-src-list="resetArr(f.url)"></el-image>
                                    <el-image v-else :src="f.firstFrame" class="img cp" @click="showVideo(f.url)">
                                    </el-image>
                                    <i class="el-icon-video-play cp" v-if="f.fileSuffix == 'mp4'"
                                        @click="showVideo(f.url)"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right box box-pack-between box-align-start padd20">
                        <div class=" box box-tb box-pack-start box-align-start" style="width: 100%;">
                            <ul class="box box-pack-between tl" style="box-sizing: border-box;width: 100%;">
                                <div v-if="item.edit == true">
                                    <span class="top tl">评分结果</span>
                                    <li v-for="(c,index) in item.pfbzList"
                                        :class="{checked:checkedArr[i].arr.includes(c.pfbzid)}" :key="index"
                                        @click="checkedBox(c.pfbzid,item.ltrid,item.ldsjid,i)" class="mb10 cp tl">
                                        {{`${c.cont}(${c.score}分)`}}
                                    </li>
                                </div>
                                <div v-else>
                                    <span class="top tl">评分结果</span>
                                    <li v-for="(c,index) in item.pfbzList" :class="{checked:c.result == `1`}"
                                        :key="index" class="mb10 cp tl">{{`${c.cont}(${c.score}分)`}}</li>
                                </div>
                                <div class="box box-tb box-align-center box-pack-center circle"
                                    v-if="item.state!=0 && item.edit ==false ">
                                    <h3>综合得分</h3>
                                    <i>{{item.sumScore}}分</i>
                                    <span class="user-name"><em>评分人</em> {{item.checkUserName}}</span>
                                </div>
                            </ul>
                        </div>

                    </div>
                </div>
                <div class="tr btn">
                    <div class="box box-pack-end" v-if="item.edit == true">
                        <span class="cancel-btn mr20 cp" @click="handleCancel(i)">取消</span>
                        <span class="confirm-btn cp" @click="handleConfirm()">确定</span>
                    </div>


                    <div class="box box-pack-end" v-else>
                        <span class="edit-btn mr20 cp" @click="handleEdit(i)" v-if="item.state!=0">修改</span>
                        <span class="edit-btn mr20 cp" @click="handleEdit(i)" v-if="item.state==0">评分</span>
                        <span class="pass-btn cp" @click="handlePass(item.ltrid)" v-if="item.state!=0">通过</span>
                    </div>

                </div>

            </div>
        </el-col>
        <el-dialog :visible.sync="videoShow" width="625px" class="diao" :before-close="handleClose">
            <video :src="videoUrl" width="100%" height="450px" controls autoplay></video>
        </el-dialog>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                videoShow: false,
                videoUrl: '',
                classid: '',
                stujlList: [],
                form: {},
                loginInfo: this.$store.state.loginInfo,
                checkedArr: [{
                    arr: []
                }]
            };
        },
        created() {
            this.classid = localStorage.getItem('classid');
            this.rwid = localStorage.getItem('rwid');
            this.pyInfoList();
        },
        methods: {
            resetArr(url) {
                let arr = []
                arr.push(url)
                return arr
            },
            pyInfoList() {
                var params = {
                    classid: this.classid,
                    rwid: this.rwid
                };
                this.$api.tr.pyInfoList(params).then(res => {
                    console.log(res.list);
                    if (res.code == '0') {
                        this.stujlList = res.list;
                        //data为集合
                        let list = []
                        this.$nextTick(() => {
                            res.list.forEach((item, i) => {
                                let items = {
                                    arr: []
                                }
                                list.push(items)
                            })
                        })
                        this.checkedArr = list
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            handleCancel(index) {
                let arr = this.stujlList
                for (let i = 0; i < arr.length; i++) {
                    var obj = new Object()
                    obj.checkUserName = arr[i].checkUserName,
                        obj.cont = arr[i].cont,
                        obj.createTime = arr[i].createTime,
                        obj.edit = index == i ? !arr[i].edit : arr[i].edit
                    obj.fileList = arr[i].fileList,
                        obj.icon = arr[i].icon,
                        obj.ldsjid = arr[i].ldsjid,
                        obj.ltrid = arr[i].ltrid,
                        obj.pfbzList = arr[i].pfbzList,
                        obj.state = arr[i].state
                    obj.sumScore = arr[i].sumScore
                    obj.userName = arr[i].userName
                    obj.userid = arr[i].userid
                    this.$set(this.stujlList, i, obj)
                }
            },
            //开启video
            showVideo(url) {
                this.videoShow = true
                this.videoUrl = url
            },
            //关闭video
            handleClose() {
                this.videoShow = false
                this.videoUrl = ''
            },
            handleConfirm() {
                this.$confirm('确认后直接通过批阅，不能再次更改, 是否确认?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.form.trid = this.loginInfo.user.id,
                        this.form.trName = this.loginInfo.user.name,
                        this.$api.tr.updatePyTask({
                            str: JSON.stringify(this.form)
                        }).then(res => {
                            if (res.code == '0') {
                                this.pyInfoList();
                                this.$message.success('操作成功！');
                            } else {
                                this.$message.error('请求失败！');
                            }
                        })
                }).catch(() => {
                    //几点取消的提示
                });
            },
            handleEdit(index) {
                let arr = this.stujlList
                for (let i = 0; i < arr.length; i++) {
                    var obj = new Object()
                    obj.checkUserName = arr[i].checkUserName,
                        obj.cont = arr[i].cont,
                        obj.createTime = arr[i].createTime,
                        obj.edit = index == i ? !arr[i].edit : arr[i].edit
                    obj.fileList = arr[i].fileList,
                        obj.icon = arr[i].icon,
                        obj.ldsjid = arr[i].ldsjid,
                        obj.ltrid = arr[i].ltrid,
                        obj.pfbzList = arr[i].pfbzList,
                        obj.state = arr[i].state
                    obj.sumScore = arr[i].sumScore
                    obj.userName = arr[i].userName
                    obj.userid = arr[i].userid
                    this.$set(this.stujlList, i, obj)
                }
            },
            handlePass(ltrid) {
                this.$confirm('通过后不能再次修改, 是否确认通过?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var params = {
                        classid: this.classid,
                    };
                    this.$api.tr.updateSjTask({
                        ltrid: ltrid
                    }).then(res => {
                        if (res.code == '0') {
                            this.pyInfoList();
                            this.$message.success('操作成功！');
                        } else {
                            this.$message.error('请求失败！');
                        }
                    })
                }).catch(() => {
                    //几点取消的提示
                });
            },
            checkedBox(pfbzid, ltrid, ldsjid, i) {
                if (this.checkedArr[i].arr.includes(pfbzid)) {
                    this.checkedArr[i].arr = this.checkedArr[i].arr.filter(function(ele) {
                        return ele != pfbzid;
                    });
                } else {
                    this.checkedArr[i].arr.push(pfbzid);
                }
                this.form.pfbzids = this.checkedArr[i].arr;
                this.form.ltrid = ltrid;
                this.form.ldsjid = ldsjid;
            }
        }
    }
</script>

<style scoped lang="scss">
    .posr {
        position: relative;

        .el-icon-video-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .list {
        min-height: 263px;
        background: #FFFFFF;
        border-radius: 7px;

        .left {
            min-width: 375px;
            width: 375px;
            padding-right: 80px;
            border-right: 1px solid #ccc;

            .info {
                .avatar {
                    width: 34px;
                    height: 34px;
                }

                .name {
                    font-size: 16px;
                    font-weight: 600;
                }

                .class-name {
                    padding: 3px 10px;
                    width: 100px;
                    height: 22px;
                    background: #F3F4FB;
                    border-radius: 11px;
                    font-size: 14px;
                    color: #939FF4;
                }

                .time {
                    font-size: 13px;
                }
            }

            .content {
                margin-left: 55px;

                .text {
                    font-size: 16px;
                    font-weight: 600;
                }

                .images {
                    flex-wrap: wrap;

                    .img {
                        width: 96px;
                        height: 96px;
                    }
                }

            }
        }

        .right {
            // padding-left: 80px;
            margin-left: 80px;
            min-width: 400px;
            // width: 100%;
            width: calc(100% - 80px);
            height: auto !important;
            background-color: #F4F5FC;

            .top {
                display: block;
                width: 100%;
                margin: 0 0 10px -30px;
            }

            ul {
                box-sizing: border-box;
                // min-width: 600px;
                // margin-left: 80px;
                padding: 20px 0 20px 70px;
                background-color: #F4F5FC;
            }

            li {
                padding: 0 20px;
                // width: 226px;
                height: 24px;
                line-height: 24px;
                background: #E7E8F3;
                border-radius: 12px;
                font-size: 14px;

                &.checked {
                    background: #7181F9;
                    color: #fff;
                }
            }

            .circle {
                margin-left: 50px;
                box-sizing: border-box;
                width: 130px;
                height: 130px;
                background: #FFF4F6;
                border: 1px solid #FFBCC8;
                border-radius: 50%;

                h3 {
                    font-size: 14px;
                }

                i {
                    color: #FF5A77;
                    font-size: 28px;
                }

                .user-name {
                    em {
                        font-size: 12px;
                    }
                }
            }
        }

        .btn {
            span {
                box-sizing: border-box;
                display: block;
                width: 102px;
                height: 32px;
                line-height: 30px;
                background: #FFFFFF;
                border: 1px solid #D6DBE7;
                border-radius: 16px;
                text-align: center;
            }

            .edit-btn {
                border: 1px solid #FF5A77;
                color: #FF5A77;
            }

            .confirm-btn.confirm-btn {
                background: #FF9B4F;
                color: #fff;
            }

            .pass-btn {
                border: 1px solid #FF9B4F;
                background: #FF9B4F;
                color: #fff;
            }
        }
    }

    .diao>>>.el-dialog__body {
        padding: 0;
    }
</style>
